<template>
    <div>
        <el-tabs v-model="activeName">
            <el-tab-pane :label="'未读消息'+'('+yidu.length+')'" name="first">
                <el-table :data="yidu" style="width: 100%" >
                    <el-table-column prop="title" width="580">
                    </el-table-column>  
                    <el-table-column prop="date">
                    </el-table-column>
                    <el-table-column >
                        <template slot-scope="scope">
                            <el-button @click="bwwd(scope.row)">标为已读</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button @click="allyd">全部标为已读</el-button>
            </el-tab-pane>
            <!-- 已读 -->
            <el-tab-pane :label="'已读消息'+'('+weid.length+')'" name="second">

                <el-table :data="weid" style="width: 100%" >
                    <el-table-column prop="title" width="580">
                    </el-table-column>  
                    <el-table-column prop="date">
                    </el-table-column>
                    <el-table-column >
                        <template slot-scope="scope">
                            <el-button @click="sc(scope.row)">删除</el-button>
                            <el-button @click="hywd(scope.row)">还原未读</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <el-button @click="allsc">删除全部</el-button>
            </el-tab-pane>
            <!-- 回收站 -->
            <el-tab-pane :label="'回收站'+'('+hsz.length+')'" name="third">
                 <el-table :data="hsz" style="width: 100%" >
                    <el-table-column prop="title" width="580">
                    </el-table-column>  
                    <el-table-column prop="date">
                    </el-table-column>
                    <el-table-column >
                        <template slot-scope="scope">
                            <el-button @click="hy(scope.row)">还原</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button @click="allqk">全部清空</el-button>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            list1: [],
            activeName:'second',
            tableData1:[],
        };
    },
    computed:{
        weid:{
            get:function(){
                return this.$store.state.tabLists.weidu
            }
        },
        hsz:{
            get:function(){
                return this.$store.state.tabLists.hsz
            }
        },
        yidu:{
            get:function(){
                return this.$store.state.tabLists.yidu
            }
        }
    },
    mounted() {
        this.xr()
    },
    methods: {
        //全部清空
        allqk(){
            this.$store.commit('tabLists/allqk')
        },
        //还原未读
        hy(row){
            this.$store.commit('tabLists/add_yidu',row)
            // this.tableData1.push(row)
            for (let i = 0; i < this.hsz.length; i++) {
                if(this.hsz[i].id==row.id){
                    // this.hsz.splice(i,1)
                    this.$store.commit('tabLists/schsz',i)
                }                
            }
        },
        //删除全部
        allsc(){
            
            for (let i = 0; i < this.weid.length; i++) {
            // this.hsz.push(this.weid[i])
            this.$store.commit('tabLists/addall_hsz',this.weid[i])
            }
            this.$store.commit('tabLists/allsc')
        },
        //删除
        sc(row){
            for (let i = 0; i < this.weid.length; i++) {
                    if(this.weid[i].id==row.id){
                        // this.weid.splice(i,1)
                        this.$store.commit('tabLists/scwd',i)
                    }
            }
            this.$store.commit('tabLists/sc',row)
        },
        //还原未读
        hywd(row){
            for (let i = 0; i < this.weid.length; i++) {
                    if(this.weid[i].id==row.id){
                        // this.weid.splice(i,1)
                        this.$store.commit('tabLists/scone_wd',i)
                    }                
            }
            this.$store.commit('tabLists/tjwd',row)
        },
        //全部还原已读
        allyd(){
            // console.log(this.tableData1);
            for (let i = 0; i < this.yidu.length; i++) {
                 this.$store.commit('tabLists/allyd',this.yidu[i])
                
            }
            this.$store.commit('tabLists/ydk')
            // this.tableData1=[]
        },
        //标为已读
        bwwd(row){
            console.log(row);
            this.$store.commit('tabLists/bwwd',row)
            console.log(this.weid);
            for (let i = 0; i < this.yidu.length; i++) {
                    if(this.yidu[i].id==row.id){
                      this.$store.commit('tabLists/scyd',i)
                    }                
            }
        },
        xr() {
            axios.get('/params/biao').then(res => {
                this.$store.commit('tabLists/yd',res.data.data.data[0])
                // this.list1 = res.data.data.data[0]
                // this.tableData1 = this.list1
                console.log(res.data.data.data[0]);
            })
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    }
};
</script>